<template>

    <div class="box">

        <div class="item">
            <el-card style="height: 180px;">
                <div style=" width: 100%; height: 140px; display: grid; align-items: center; justify-content: center;">
                    <el-tooltip content="点击添加新的群组(部门)" effect="light">
                        <el-button link @click="add">
                            <el-icon :size="58">
                                <Plus />
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                </div>
            </el-card>
        </div>

        <VueDraggable ref="el" v-model="glist">
            <div class="item" v-for="item in glist" :key="item.id">
                <el-card style="height: 180px;">
                    <template #header>
                    <div class="card-header">
                        <span>{{ item.name }}</span>
                    </div>
                    </template>

                    <VueDraggable ref="elgp" v-model="gplist">

                        <div v-for="gpitem in gplist" :key="gpitem.id">
                            {{ gpitem.name }}
                        </div>

                    </VueDraggable>
                    <!-- <div
                        style=" width: 100%; height: 140px; display: grid; align-items: center; justify-content: center;">
                        {{ item.name }}
                    </div> -->







                </el-card>
            </div>
        </VueDraggable>

    </div>
</template>

<script>
import { defineComponent, onMounted, ref, toRefs, reactive } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
export default defineComponent({
    name: 'App',
    components: {
        VueDraggable,
    },
    setup() {
        const plist = ref([
            {
                name: 'Joao',
                id: 1,
                checked: false,
            },
            {
                name: 'Jean',
                id: 2,
                checked: true,
            },
            {
                name: 'Johanna',
                id: 3,
                checked: false,
            },
            {
                name: 'Juan',
                id: 4,
                checked: false,
            },
        ]);

        const data = reactive({
            glist: [
                {
                    name: '计算机',
                    id: 1,
                    checked: false,
                },
                {
                    name: '音乐',
                    id: 2,
                    checked: true,
                },
                {
                    name: '思想品德',
                    id: 3,
                    checked: false,
                },
                {
                    name: '体育',
                    id: 4,
                    checked: false,
                },
                {
                    name: '地理',
                    id: 6,
                    checked: false,
                },
                {
                    name: '政治',
                    id: 7,
                    checked: false,
                },
            ],
            gplist: [
                {
                    id: 1,
                    name: '部门1'
                },
                {
                    id: 2,
                    name: '部门2'
                },
                {
                    id: 3,
                    name: '部门3'
                },
                {
                    id: 4,
                    name: '部门4'
                }
            ]
        })

        onMounted(() => {
            console.log(plist)
            plist.value = [
                {
                    name: '语文',
                    id: 1,
                    checked: false,
                },
                {
                    name: '数学',
                    id: 2,
                    checked: true,
                },
                {
                    name: '英语',
                    id: 3,
                    checked: false,
                },
                {
                    name: '化学',
                    id: 4,
                    checked: false,
                },
                {
                    name: '物理',
                    id: 6,
                    checked: false,
                },
                {
                    name: '美术',
                    id: 7,
                    checked: false,
                },
            ]
            data.glist = plist
            console.log(data.glist)
            // console.log(data.glist)
        })


        return { plist, ...toRefs(data) };
    },
});
</script>

<style lang="scss" scoped>
.box {
    margin: 10px;
    column-count: 2;
    column-gap: 10px;

    @media screen and (min-width: 400px) {
        column-count: 2;
    }

    @media screen and (min-width: 600px) {
        column-count: 3;
    }

    @media screen and (min-width: 800px) {
        column-count: 4;
    }

    @media screen and (min-width: 1100px) {
        column-count: 5;
    }

    .item {
        margin-bottom: 10px;
        /* table {
      border-spacing: 1px;
      border-color: rgb(255, 255, 255);
      width: 100%;
    } */

        .el-collapse {
            border-top: none;

            .el-collapse-item {
                button {
                    background-color: #E6A23C;
                    font-weight: 400;
                    display: block;
                    text-align: center;

                    .el-icon {
                        display: none;
                    }
                }

                .el-collapse-item__header {
                    color: #fff;
                    font-weight: bold;
                }

                .el-collapse-item__wrap {
                    border-bottom: none;
                }
            }

        }

        .el-card {
            min-height: 180px;

            .el-card__header {
                background-color: #409EFF;
                color: #fff;
                text-align: center;
            }

            .el-card__body {
                table {
                    border-spacing: 1px;
                    border-color: rgb(255, 255, 255);
                    width: 100%;
                    font-size: 14px;
                }
            }

            .el-card__footer {
                font-size: 14px;
                color: #606266;
            }

        }


    }

}
</style>